<template>
  <!-- 图例 -->
  <FoldBox ref="foldBox">
    <template #hd>
      <b class="title">图例</b>
    </template>
    <template #hd-right>
      <a-switch size="small" v-model:checked="isLegend" @change="legendShowChange" />
    </template>
    <template #bd>
      <a-row style="margin-top: 8px">
        <a-col :span="6">展示位置</a-col>
        <a-col :span="18" style="text-align: right">
          <a-select
            v-model:value="config.position"
            @change="change"
            placeholder="请选择"
            size="small"
            style="width: 150px"
          >
            <a-select-option v-for="item in positionList" :key="item" :value="item">
              {{ item }}</a-select-option
            >
          </a-select>
        </a-col>
      </a-row>
      <a-row style="margin-top: 8px">
        <a-col :span="6">X偏移</a-col>
        <a-col :span="18" style="text-align: right">
          <a-input-number
            size="small"
            v-model:value="config.offsetX"
            placeholder="请输入数字"
            @change="change"
          />
        </a-col>
      </a-row>
      <a-row style="margin-top: 8px">
        <a-col :span="6">Y偏移</a-col>
        <a-col :span="18" style="text-align: right">
          <a-input-number
            size="small"
            v-model:value="config.offsetY"
            placeholder="请输入数字"
            @change="change"
          />
        </a-col>
      </a-row>
    </template>
  </FoldBox>
</template>
<script>
  import { defineComponent } from 'vue';
  import FoldBox from '../../_source/foldBox.vue';

  export default defineComponent({
    components: { FoldBox },

    props: {
      legend: {
        type: [Boolean, Object],
      },
    },

    data() {
      return {
        positionList: [
          'top',
          'top-left',
          'top-right',
          'left',
          'left-top',
          'left-bottom',
          'right',
          'right-top',
          'right-bottom',
          'bottom',
          'bottom-left',
          'bottom-right',
        ],
        isLegend: true,
        config: {
          position: 'top',
          offsetX: 0,
          offsetY: 0,
        },
      };
    },

    created() {
      this.init();
    },

    methods: {
      init() {
        !this.legend ? (this.isLegend = false) : (this.config = this.legend);
      },

      legendShowChange(v) {
        this.change();
      },

      change() {
        this.$emit('change', !this.isLegend ? { legend: false } : { legend: this.config });
      },
    },
  });
</script>
